<template>
  <div style="margin-bottom: 20px;">
    <a-alert message="警告！" description="由于井起始深度大于200m，需要输入造斜信息。请在最下方输入框中添加造斜信息。" type="warning" show-icon />
  </div>
  <a-table :columns="columns" :data-source="dataSource" bordered :pagination="false">
    <template #bodyCell="{ column, text, record }">
      {{ text }}
    </template>
  </a-table>
  <div style="margin-top: 20px;">
    <a-form :model="form" name="basic" :label-col="{ span: 9 }">
      <a-row>
        <a-col :span="8">
          <a-form-item label="造斜井深" name="depth" :rules="[{ required: true, message: '请输入井深' }]">
            <a-input-number placeholder="请输入井深" v-model:value="form.depth" style="width: 100%" :min="0" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="井斜" name="inclination" :rules="[{ required: true, message: '请输入井斜' }]">
            <a-input-number placeholder="请输入井斜" v-model:value="form.inclination" style="width: 100%" :min="0" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="方位角" name="azimuth" :rules="[{ required: true, message: '请输入方位角' }]">
            <a-input-number placeholder="请输入方位角" v-model:value="form.azimuth" style="width: 100%" :min="0" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </div>
  <a-divider />
  <a-row>
    <a-col>
      <a-button type="primary" style="margin-left: 550px; width: 100px;" @click="submitOblique">确认</a-button>
    </a-col>
  </a-row>
</template>
<script setup>
import { cloneDeep } from 'lodash-es';
const form = ref({
  depth: 0,
  azimuth: 0,
  inclination: 0
})
const props = defineProps({
  obliqueData: Array
})
const columns = [
  {
    title: '井深',
    dataIndex: 'depth',
    key: 'depth',
  },
  {
    title: '井斜',
    dataIndex: 'inclination',
    key: 'inclination',
  },
  {
    title: '方位角',
    dataIndex: 'azimuth',
    key: 'azimuth',
  }
];
const dataSource = ref(props.obliqueData);
const emit = defineEmits(["getOblique"])


const editableData = reactive({});
const edit = key => {
  editableData[key] = cloneDeep(dataSource.value.filter(item => key === item.key)[0]);
};
const save = key => {
  console.log('save', key);
};
const cancel = key => {
  delete editableData[key];
};

function submitOblique() {
  emit('getOblique', form.value)
}
</script>